
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Users, Calendar, MessageCircle, Settings, Search, Filter } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Group } from "@/types/profile";

const groups: Group[] = [
  {
    id: "1",
    name: "Visual Study Masters",
    members: 89,
    role: "Member",
    joinDate: "2024-02-15",
    lastActivity: "2 hours ago"
  },
  {
    id: "2", 
    name: "Creative Project Lab",
    members: 124,
    role: "Moderator",
    joinDate: "2024-01-20",
    lastActivity: "1 day ago"
  },
  {
    id: "3",
    name: "Psychology Study Circle",
    members: 67,
    role: "Member", 
    joinDate: "2024-03-01",
    lastActivity: "3 days ago"
  }
];

export function MyGroups() {
  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row gap-4 justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">My Groups</h2>
          <p className="text-gray-600 mt-1">
            Groups you've joined for collaborative learning and academic support.
          </p>
        </div>
        <Button className="bg-blue-600 hover:bg-blue-700">
          <Users className="w-4 h-4 mr-2" />
          Find New Groups
        </Button>
      </div>

      {/* Search and Filter */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
          <Input placeholder="Search your groups..." className="pl-10" />
        </div>
        <Select>
          <SelectTrigger className="w-full sm:w-48">
            <Filter className="w-4 h-4 mr-2" />
            <SelectValue placeholder="Filter by role" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Groups</SelectItem>
            <SelectItem value="member">Member</SelectItem>
            <SelectItem value="moderator">Moderator</SelectItem>
            <SelectItem value="admin">Admin</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Groups Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {groups.map((group) => (
          <Card key={group.id} className="hover:shadow-md transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div>
                  <CardTitle className="text-lg">{group.name}</CardTitle>
                  <div className="flex items-center gap-2 mt-2">
                    <Badge variant={group.role === "Moderator" ? "default" : "secondary"}>
                      {group.role}
                    </Badge>
                    <span className="text-sm text-gray-500">{group.members} members</span>
                  </div>
                </div>
                <Button variant="ghost" size="sm">
                  <Settings className="w-4 h-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between text-sm text-gray-600">
                  <div className="flex items-center gap-1">
                    <Calendar className="w-4 h-4" />
                    <span>Joined {group.joinDate}</span>
                  </div>
                  <span>Active {group.lastActivity}</span>
                </div>
                
                <div className="flex gap-2">
                  <Button size="sm" className="flex-1">
                    <MessageCircle className="w-4 h-4 mr-2" />
                    View Group
                  </Button>
                  <Button variant="outline" size="sm">
                    Leave
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Empty State for new users */}
      {groups.length === 0 && (
        <Card className="text-center py-12">
          <CardContent>
            <Users className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              No Groups Yet
            </h3>
            <p className="text-gray-600 mb-6">
              Join your first group to connect with peers and enhance your learning experience.
            </p>
            <Button className="bg-blue-600 hover:bg-blue-700">
              <Users className="w-4 h-4 mr-2" />
              Browse Groups
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
